<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="author" content="terry - gbin1.com">

    <meta name="description" content="HTML5 webcam demo">

    <meta name="keywords" content="HTML5,webcam,gbin1.com, gbin1, gbtags">
    <title>摄像头拍照</title>
    
    <link rel="stylesheet" href="./public/camera/css/jquery.qtip.css" type="text/css" media="screen">
    
    <script type="text/javascript" src="./public/camera/js/jquery-1.8.2.min.js"></script>

    <script type="text/javascript" src="./public/camera/js/photobooth_min.js?v=1.0.1"></script>

    <script type="text/javascript" src="./public/camera/js/jquery.qtip.min.js"></script>

    <script type="text/javascript" src="./public/camera/js/gbin1.js?v=1.0.1"></script>

    <style>

      body{

        font-size:12px;

        /*background: #333;*/

        font-family: 'Revalia', cursive, arial;

      }

      

      div#pictures,div#webcam{

        margin: 10px 0 0;

      }

      

      h1{

        margin: 20px 0;

      }

      

      div#from{

        margin:20px 0px;

      }

      

      div#from a{

        color: #FFF;

        font-size:12px;

        background: #1557C3;

        margin: 20px 0;

        border-radius: 5px;

        padding:10px;

        line-height: 25px;

      }

      

      h1 a{

        background: #333;

        border-radius: 5px;

        padding: 5px;

        float:right;

        cusor: hand;

        color: #FFF;

        text-decoration: none;

        margin-left: 20px;

      }

      

      #main{

        width: 800px;

        margin: 10px auto;

        background: #FFF;

        color: #333;

        border: 2px solid #FFF;

        box-shadow: 0px 0px 10px #CCC;

        padding:20px;

        border-radius: 5px;

      }

      

      #main article{

        margin-bottom: 50px;

        background: #F8F8F8;

        border-radius: 5px;

        padding:20px;

        border: 1px solid #bbb;

      }

      

      #main #webcam{

        height: 400px;

        width: 100%;

      }

      

      #main #plist{

        margin: 20px 0;

        font-weight: bold;

        border-radius: 5px;

        background: #CCC;

        padding:10px;

      }

      

      #main img{

        margin-bottom: 50px;

        background: #F8F8F8;

        border-radius: 10px;

        box-shadow: 0px 0px 5px #888;

      }     

      

      .clear{

        clear:both;

      }

      

      #main ul{

        list-style:none;

        margin:0;

        padding:0;

      }

      

      #main .photobooth{

        border: 1px solid #ccc;

        border-radius: 5px;

      }

    

    </style>
  </head>
<body>
  <section id="main">

      <!-- <h1> HTML5 Webcam </h1> -->

      <article>

      <!-- <h1>click the controll menu below, you can controll crop, hue, brightness, take picture </h1> -->

      <div id="webcam"></div>

      <div id="plist"> <button type="button" class="btn btn-primary" id="pic_submit" >确定保存</button> </div>

      <div id="pictures"><div class="nopic">no pictures</div></div>

      <div class="clear"></div>

      </article>

    </section>
</body>
</html>
<script type="text/javascript">
  $("#pic_submit").click(function(){

    var img_src = $("#photo_url").attr("src");
    // console.log(img_src);
    if (img_src != null && img_src != '') {
      var Img = '';
      Img = "<img name=\"interpic[]\" src=\""+img_src+"\"  style=\"width:100%;height:auto;margin:10px 10px;\"/>";
      $("#interpic_div",parent.document).append(Img);
      

      var project_id = $("#project_id",parent.document).val();
      //上传拍照的照片
      $.ajax({
        type: "post",
        url: "/../../controller/inspection/uploadtakephoto.php",
        data: {
          project_id:project_id,
          pic:img_src,
            },
        dataType: "json",
        success: function(rtJson){
          if (rtJson.code == 0) {
              layer.msg(rtJson.msg);
          }
            
        }
      });
    }
    $('#close_photo',parent.document).trigger('click');
  });
</script>